import { reactive } from 'vue';
import { defaultsDeep } from 'lodash';

interface IOceanComponent<T> {
  isOcean: boolean;
  isOceanComponent: boolean;
  oceanComponent: Function;
  attrs: T;
  setAttrs(a: Partial<T>): this;
  getAttrs(): any;
}

class OceanComponent<T = any> implements IOceanComponent<T> {
  isOcean: boolean = true;
  isOceanComponent: boolean = true;
  oceanComponent: IOceanComponent<T>['oceanComponent'];
  attrs: T;
  private _ref;
  constructor(component: IOceanComponent<T>['oceanComponent'], attrs?: T, _attrs?: T) {
    this.oceanComponent = () => component;
    this.attrs = defaultsDeep(reactive(attrs || {}) as T, _attrs);
  }
  setAttrs(attr: Partial<T>): this {
    Object.assign(this.attrs, attr);
    return this;
  }
  getAttrs(): any {
    return this.attrs;
  }

  setRef(ref) {
    this._ref = ref;
  }

  getRef() {
    return this._ref && this._ref.value;
  }
}

export default OceanComponent;
export type { IOceanComponent };
